layui.use(['element', 'layer'], function () {
            var element = layui.element;
            var layer = layui.layer;

            //监听折叠
            element.on('collapse(test)', function (data) {
                layer.msg('展开状态：' + data.show);
            });
        });

        function clear_toastr(time) {
            setTimeout(
                function () {
                    toastr.clear();
                }, time);
        }

        function resetInput() {
            queryType = $("input[name='optionsRadiosinline']:checked").val();
            dataInfo = {};
            if (queryType == '1') {
                $('#ip').val('');
                $('#interfacename').val('');
                $('#apiid').val('');
                $('#date').val('');
                $('#requestTime').val('');
            } else if (queryType == '2') {
                $('#interfacename').val('');
                $('#channelname').val('');
                $('#date').val('');
            } else if (queryType == '3') {
                $('#interfacename').val('');
                $('#ip').val('');
                $('#requestid').val('');
            }
        }

        function queryTest() {

            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
            });
            queryType = $("input[name='optionsRadiosinline']:checked").val();
            dataInfo = {};
            if (queryType == '1') {
                dataInfo = {
                    'interfacename': $("input[name='interfacename']").val(),
                    'ip': $("input[name='ip']").val(),
                    'apiid': $("input[name='apiid']").val(),
                    'date': $("input[name='date']").val(),
                    'requesttime': $("input[name='requestTime']").val(),
                    'optionsRadiosinline': $("input[name='optionsRadiosinline']:checked").val()
                }
            } else if (queryType == '2') {
                dataInfo = {
                    'interfacename': $("input[name='interfacename']").val(),
                    'channelname': $("input[name='channelname']").val(),
                    'date': $("input[name='date']").val(),
                    'optionsRadiosinline': $("input[name='optionsRadiosinline']:checked").val()
                }
            } else if (queryType == '3') {
                dataInfo = {
                    'interfacename': $("input[name='interfacename']").val(),
                    'ip': $("input[name='ip']").val(),
                    'requestid': $("input[name='requestid']").val(),
                    'optionsRadiosinline': $("input[name='optionsRadiosinline']:checked").val()
                }
            }
            console.log(dataInfo);
            $.ajax({
                    //url: "{% url 'querylog:submit' %}",
                    url: "http://127.0.0.1:8000/querylog/submit",
                    type: 'POST',
                    dataType: 'json',
                    data: dataInfo,
                    success: function (data) {
                        log_th = '';
                        log_td = '';
                        db_th = '';
                        db_td = '';
                        if (data.code == 200) {
                            //数据提交成功，关闭模态框
                            toastr.info('数据查询成功');
                            clear_toastr(2500);
                        }
                        else if (data.code == 201) {
                            toastr.error('查询失败');
                        }
                        if (data.code == 1002) {
                            toastr.error(data.reason);
                        }
                        console.log(data);
                        if (data['queryType'] == '1') {
                            $('#log_table').append("<caption id = 'rizhi'>" + "日志" + "</caption>");
                            $('#db_table').append("<caption id = 'ku'>" + "数据库" + "</caption>");
                            console.log(data['logNum']);

                            for (var logkeys in data['logNum']) {
                                console.log(logkeys);
                                log_th += '<th>' + logkeys + '</th>';
                                log_td += '<td>' + data['logNum'][logkeys] + '</td>';
                            }
                            for (var logkeys in data['dbNum']) {
                                console.log(logkeys);
                                db_th += '<th>' + logkeys + '</th>';
                                db_td += '<td>' + data['dbNum'][logkeys] + '</td>';
                            }
                            $('#log_code').append(log_th);
                            $('#log_cont').append(log_td);
                            $('#db_code').append(db_th);
                            $('#db_cont').append(db_td);
                        }
                        ;
                        if (data['queryType'] == '2') {
                            $('#log_table').append("<caption id = 'rizhi'>" + "日志" + "</caption>"));
                            $('#db_table').append("<caption id = 'ku'>" + "数据库" + "</caption>");
                            $('#log_code').empty();
                            $('#log_cont').empty();
                            $('#db_cont').empty();
                            $('#db_code').empty();
                            console.log(data);
                            for (var logkeys in data['logNum']) {
                                console.log(logkeys);
                                log_th += '<th>' + logkeys + '</th>';
                                log_td += '<td>' + data['logNum'][logkeys] + '</td>';
                            }
                            for (var logkeys in data['dbNum']) {
                                console.log(logkeys);
                                db_th += '<th>' + logkeys + '</th>';
                                db_td += '<td>' + data['dbNum'][logkeys] + '</td>';
                            }
                            $('#log_code').append(log_th);
                            $('#log_cont').append(log_td);
                            $('#db_code').append(db_th);
                            $('#db_cont').append(db_td);

                        } else if (data['queryType'] == '3') {
                            $('#table-content').remove();
                            $('#pannel-info').css('opacity', 1);
                            $('#title-one').append('facade');
                            $('#title-two').append('cloud');
                            $('#title-three').append('facade-225');
                            $('#title-four').append('cloud-225');
                            $('#content-one').append(data['facade']);
                            $('#content-two').append(data['cloud']);
                            $('#content-three').append(data['facade_225']);
                            $('#content-four').append(data['cloud_225']);
                            console.log(data);
                            console.log($('#title-one').text())
                        }
                    },
                    error: function (data) {
                        alert('这个data没有了')
                    }
                }
            );
        }

        function encryption() {
            if ($('#log_code').text() != "") {
                $('#rizhi').text('');
                $('#ku').text('');
                $('#log_code').empty();
                $('#log_cont').empty()
            } else if ($('#title-one').text() != "") {
                $('#pannel-info').css('opacity', 0);
                $('#title-one').text('');
                $('#title-two').text('');
                $('#title-three').text('');
                $('#title-four').text('');
                $('#content-one').text('');
                $('#content-two').text('');
                $('#content-three').text('');
                $('#content-four').text('');
            }
            var replaceDiv = document.getElementById('replaceDiv');
            var replaceContent = " <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">机器IP</label>\n" +
                "                        <input type=\"text\" id=\"ip\" name=\"ip\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"业务机器IP\">\n" +
                "                    </div>\n" +
                "                    <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">接口名</label>\n" +
                "                        <input type=\"text\" id=\"interfacename\" name=\"interfacename\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入接口名\">\n" +
                "                    </div>\n" +
                "                    <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">流水号</label>\n" +
                "                        <input type=\"text\" id=\"requestid\" name=\"requestid\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入RequestID\">\n" +
                "                    </div>\n" +
                "                ";
            $("#replaceDiv").empty();
            $("#replaceDiv").append(replaceContent)
        }

        function queryinter() {
            if ($('#log_code').text() != "") {
                $('#rizhi').text('');
                $('#ku').text('');
                $('#log_code').empty();
                $('#log_cont').empty()
            } else if ($('#title-one').text() != "") {
                $('#pannel-info').css('opacity', 0);
                $('#title-one').text('');
                $('#title-two').text('');
                $('#title-three').text('');
                $('#title-four').text('');
                $('#content-one').text('');
                $('#content-two').text('');
                $('#content-three').text('');
                $('#content-four').text('');
            }
            var replaceContent = "<div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">机器IP</label>\n" +
                "                        <input type=\"text\" id=\"ip\" name=\"ip\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入机器IP\">\n" +
                "                    </div>\n" +
                "                    <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">APIID</label>\n" +
                "                        <input type=\"text\" id=\"apiid\" name=\"apiid\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入APIID\">\n" +
                "                    </div>\n" +
                "                    <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">接口名</label>\n" +
                "                        <input type=\"text\" id=\"interfacename\" name=\"interfacename\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入接口名\">\n" +
                "                    </div>\n" +
                "                    <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">时间</label>\n" +
                "                        <input type=\"text\" id=\"date\" name=\"date\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入date,如2019070819\">\n" +
                "                    </div>\n" +
                "                    <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">特定时间</label>\n" +
                "                        <input type=\"text\" id=\"requestTime\" name=\"requestTime\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入time,如10\">\n" +
                "                    </div>";
            $("#replaceDiv").empty();
            $("#replaceDiv").append(replaceContent)
        }

        function querychannel() {
            if ($('#log_code').text() != "") {
                $('#rizhi').text('');
                $('#ku').text('');
                $('#log_code').empty();
                $('#log_cont').empty()
            } else if ($('#title-one').text() != "") {
                $('#pannel-info').css('opacity', 0);
                $('#title-one').text('');
                $('#title-two').text('');
                $('#title-three').text('');
                $('#title-four').text('');
                $('#content-one').text('');
                $('#content-two').text('');
                $('#content-three').text('');
                $('#content-four').text('');
            }
            var replaceDiv = document.getElementById('replaceDiv');
            var replaceContent = " <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">供应商</label>\n" +
                "                        <input type=\"text\" id=\"channelname\" name=\"channelname\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入渠道简称\">\n" +
                "                    </div>\n" +
                "                    <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">接口名</label>\n" +
                "                        <input type=\"text\" id=\"interfacename\" name=\"interfacename\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入接口名\">\n" +
                "                    </div>\n" +
                "                    <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">查询时间</label>\n" +
                "                        <input type=\"text\" id=\"date\" name=\"date\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入date,如2019070819\">\n" +
                "                    </div>\n" +
                "                ";
            $("#replaceDiv").empty();
            $("#replaceDiv").append(replaceContent)
        }